<template>
  <!-- 注意跳转组件要加 /#/ 开头的/可以省略 -->
  <div class="navigation" ref="nav">
    <ul>
      <!-- <li> -->
      <!-- 普通的标签写法 -->
      <!-- <a href="/#/films/">film</a> -->

      <!-- 这个跟路由配套 to属性就是对应的路由，默认会生成一个<a href='#/films/'>，点击会跳转路由 -->
      <!-- <router-link to="/films" >films</router-link> -->
      <!-- </li> -->
      <!-- 使用tag可以改变默认生成的标签(<a></a>),如下, 此时有两个li可以将外面的li去掉,里面的li有点击事件就是跳转到对应的路由 -->
      <!-- <router-link to="/films"  tag="li">films</router-link> -->
      <!-- 关于高亮的功能 使用router-link会自动检测当前的路由匹配对应的router-link, 并给该router-link生成一个默认的class
          叫router-link-active  利用写好的功能,直接给这个class名写个样式就好了, 此时就追踪路由和跳转按钮达到高亮随路由变化
          就是我每次进入那个路由, 对应的按钮刚好能跳转那个路由, 那么他会高亮 -->
      <!-- 我也可以自定义高亮class的名字,因为默认的名字只有一个, 如果我需要多个高亮class名字不够用--自定义-
          传入active-class属性就是高亮class -->
      <!-- <router-link to="/films"  tag="li" active-class="fqm-active">films</router-link> -->
      <!-- 但是仍然存在一些问题,譬如我的tag只能写对应的一个标签, 虽然我可以通过写style来改变tag对应的样式, 但是仍然有限
        为了解决这一个问题, vue推出了新的解决方案--vue-router(也有官网)会在4.0的时候摒弃掉tag的用法,  -->
      <router-link to="/films" custom v-slot="{ navigate, isActive }">
        <!--  custom表示自定义, v-slot指令传入一个对象, 在我点击之后就会触发navigate这个函数, navigate就是跳转到对应的路由
                isActive 是一个boolean值,反映的是当前router-link是否和路由匹配--是否活跃--应用高亮 -->
        <li @click="navigate" :class="isActive ? 'fqm-active' : ''">
          <svg
            t="1674905040752"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1447"
          >
            <path
              d="M885.333333 256H138.666667a53.393333 53.393333 0 0 0-53.333334 53.333333v576a53.393333 53.393333 0 0 0 53.333334 53.333334h746.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V309.333333a53.393333 53.393333 0 0 0-53.333334-53.333333z m10.666667 629.333333a10.666667 10.666667 0 0 1-10.666667 10.666667H138.666667a10.666667 10.666667 0 0 1-10.666667-10.666667V309.333333a10.666667 10.666667 0 0 1 10.666667-10.666666h746.666666a10.666667 10.666667 0 0 1 10.666667 10.666666zM659.5 556.266667l-202.666667-122.62A48 48 0 0 0 384 474.72v245.226667a47.886667 47.886667 0 0 0 72.846667 41.073333l202.666666-122.62a48 48 0 0 0 0-82.133333z m-22.086667 45.626666l-202.666666 122.62a5.333333 5.333333 0 0 1-8.093334-4.566666V474.72a5.073333 5.073333 0 0 1 2.713334-4.666667A5.333333 5.333333 0 0 1 432 469.333333a5.24 5.24 0 0 1 2.746667 0.813334l202.666666 122.62a5.333333 5.333333 0 0 1 0 9.12zM170.666667 106.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h640a21.333333 21.333333 0 0 1 0 42.666667H192a21.333333 21.333333 0 0 1-21.333333-21.333333z m-42.666667 85.333333a21.333333 21.333333 0 0 1 21.333333-21.333333h725.333334a21.333333 21.333333 0 0 1 0 42.666666H149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333z"
              fill="#5C5C66"
              p-id="1448"
            ></path>
          </svg>
          <span>电影</span>
        </li>
      </router-link>

      <!-- 新写法的好处: 属于插槽的写法, tag只能对应一个标签, 但是插槽里你可以插入任何东西, 组件的可拓展性更好 -->

      <!-- <li> -->
      <!-- <a href="#/cinemas">cinema</a> -->
      <!-- </li> -->
      <!-- <router-link to="/cinemas"  tag="li" active-class="fqm-active">cinemas</router-link> -->
      <router-link to="/cinemas" custom v-slot="{ navigate, isActive }">
        <!--  custom表示自定义, v-slot指令传入一个对象, 在我点击之后就会触发navigate这个函数, navigate就是跳转到对应的路由
                isActive 是一个boolean值,反映的是当前router-link是否和路由匹配--是否活跃--应用高亮 -->
        <li @click="navigate" :class="isActive ? 'fqm-active' : ''">
          <svg
            t="1674907691805"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2488"
          >
            <path
              d="M864 853.333333a32 32 0 0 1 0 64H160a32 32 0 0 1 0-64z m-42.666667-746.666666c64.8 0 117.333333 52.533333 117.333334 117.333333v540.309333a42.666667 42.666667 0 0 1-78.336 23.402667L672.405333 501.344C628.48 522.816 574.912 533.333333 512 533.333333s-116.48-10.517333-160.405333-31.989333L163.669333 787.712A42.666667 42.666667 0 0 1 85.333333 764.309333V224c0-64.8 52.533333-117.333333 117.333334-117.333333h618.666666z m0 64H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333333v468.906667l165.248-251.797334a32 32 0 0 1 44.501334-9.066666C395.978667 456.64 446.762667 469.333333 512 469.333333s116.021333-12.693333 152.917333-37.290666a32 32 0 0 1 44.501334 9.066666L874.666667 692.917333V224a53.333333 53.333333 0 0 0-53.333334-53.333333z"
              fill="#5C5C66"
              p-id="2489"
            ></path>
          </svg>
          <span>影院</span>
        </li>
      </router-link>
      <!-- <li> -->
      <!-- <a href="#/center/">center</a> -->
      <!-- </li> -->
      <!-- <router-link to="/center"  tag="li" active-class="fqm-active">center</router-link> -->
      <router-link to="/consult" custom v-slot="{ navigate, isActive }">
        <!--  custom表示自定义, v-slot指令传入一个对象, 在我点击之后就会触发navigate这个函数, navigate就是跳转到对应的路由
                isActive 是一个boolean值,反映的是当前router-link是否和路由匹配--是否活跃--应用高亮 -->
        <li @click="navigate" :class="isActive ? 'fqm-active' : ''">
          <svg
            t="1674907833355"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3483"
          >
            <!-- 这里的fill无效，在app.vue里已经加了统一的fill了 -->
            <path
              d="M775.358595 569.932434c20.002566-39.477107 30.143531-81.459267 30.143531-124.777865 0-43.303248-10.143011-85.274152-30.143531-124.745119-19.151176-37.794791-46.478568-71.663156-81.224929-100.666724-70.63985-58.965973-164.312276-91.439572-263.762289-91.439572-99.447966 0-193.118346 32.473599-263.758196 91.439572-34.746362 29.003568-62.073754 62.871933-81.224929 100.666724-20.00052 39.470967-30.142507 81.44187-30.142507 124.758422 0.046049 76.812433 32.899294 150.828171 92.5253 208.503754 1.162476 2.208295 7.243985 16.452717 5.812379 70.463842-0.843204 31.79924-3.897773 60.779272-3.943822 61.214177l-5.064342 47.403636 39.890522-26.106588c0.249687-0.163729 25.272593-16.512069 53.645804-32.601512 46.888913-26.590612 62.995753-29.861098 66.378803-30.260188 40.311101 12.107759 82.652442 18.246573 125.879965 18.246573 99.457176 0 193.129602-32.469506 263.762289-91.427292C728.880027 641.602753 756.209466 607.731318 775.358595 569.932434zM430.371376 716.860784c-39.33896 0-77.804017-5.643534-114.323768-16.771989-3.329838-1.01512-6.978948-1.529843-10.849092-1.529843-11.900028 0-32.822546 4.118807-89.455381 36.243459-6.175653 3.5038-12.161994 6.994298-17.781992 10.333346 0.387833-7.568373 0.704035-15.662725 0.873903-23.931039 1.442862-70.071915-8.850575-89.604784-19.107173-99.467409-51.104935-49.174979-79.272461-111.890346-79.311347-176.582741 0-149.805888 148.017148-271.680633 329.953827-271.680633 181.939749 0 329.958944 121.875768 329.958944 271.680633C760.331343 594.974783 612.311125 716.860784 430.371376 716.860784z"
              fill="#5C5C66"
              p-id="3484"
            ></path>
            <path
              d="M966.419072 506.271532c0-45.414329-11.114129-89.25686-33.037441-130.309858-20.985964-39.298028-50.765197-74.043367-88.511893-103.272062-9.863648-7.635911-24.047696-5.831822-31.68463 4.02978s-5.831822 24.048719 4.02978 31.685653c32.67826 25.303292 58.356083 55.190997 76.32227 88.834234 18.389836 34.435277 27.713178 71.119781 27.713178 109.018949-0.037862 64.704674-28.204365 127.422088-79.298044 176.582741-10.264784 9.859555-20.564361 29.386284-19.1215 99.459223 0.169869 8.265244 0.488117 16.358573 0.873903 23.925922-7.031137-4.177136-14.638395-8.591679-22.464641-12.969383-18.893302-10.562567-35.178197-18.706037-48.4075-24.204262-21.661346-9.001001-35.783994-11.353582-47.214325-7.866155-36.497239 11.129478-74.961272 16.771989-114.322745 16.771989-19.172665 0-38.392402-1.369184-57.122999-4.069689-12.343119-1.77646-23.795962 6.785543-25.576515 19.130709-1.778506 12.345166 6.785543 23.796986 19.130709 25.576515 20.85805 3.007497 42.24515 4.533246 63.568804 4.533246 43.249013 0 85.594447-6.139837 125.883035-18.247596 3.388167 0.400113 19.49296 3.669576 66.378803 30.257118 28.371164 16.089443 53.392024 32.43676 53.641711 32.600489l39.892569 26.109658-5.064342-47.406706c-0.031722-0.286526-3.078105-29.072129-3.937682-60.929698-1.461281-54.217832 4.634554-68.506257 5.8001-70.719668C933.519778 657.120169 966.37507 583.103408 966.419072 506.271532z"
              fill="#5C5C66"
              p-id="3485"
            ></path>
            <path
              d="M250.264369 396.874983c-23.820522 0.13303-43.052538 19.544125-42.964534 43.3626 0.132006 23.818475 19.541055 43.079144 43.360554 42.965557 23.820522-0.107447 43.052538-19.495006 42.964534-43.3626C293.537941 416.041508 274.08489 396.767536 250.264369 396.874983z"
              fill="#5C5C66"
              p-id="3486"
            ></path>
            <path
              d="M431.166485 396.874983c-23.819498 0.13303-43.098587 19.544125-42.965557 43.3626 0.089028 23.818475 19.498076 43.079144 43.318598 42.965557 23.820522-0.107447 43.054585-19.495006 42.965557-43.3626C474.397079 416.041508 454.985984 396.767536 431.166485 396.874983z"
              fill="#5C5C66"
              p-id="3487"
            ></path>
            <path
              d="M602.80768 396.874983c-23.819498 0.13303-43.052538 19.544125-42.964534 43.3626 0.132006 23.818475 19.497053 43.079144 43.318598 42.965557 23.863501-0.107447 43.096541-19.495006 42.964534-43.3626C646.038274 416.041508 626.627179 396.767536 602.80768 396.874983z"
              fill="#5C5C66"
              p-id="3488"
            ></path>
          </svg>

          <span>咨询</span>
        </li>
      </router-link>

      <router-link to="/center" custom v-slot="{ navigate, isActive }">
        <li @click="navigate" :class="isActive ? 'fqm-active' : ''">
          <svg
            t="1674907855624"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4413"
          >
            <path
              d="M704 329.152C704 209.365333 622.848 128 512 128s-192 81.365333-192 201.152C320 454.762667 407.146667 554.666667 512 554.666667s192-99.904 192-225.514667z m42.666667 0C746.666667 476.714667 642.176 597.333333 512 597.333333s-234.666667-120.618667-234.666667-268.181333C277.333333 181.546667 381.824 85.333333 512 85.333333s234.666667 96.213333 234.666667 243.818667zM512.106667 640c408.96 0 404.864 256.512 404.864 256.512 3.093333 23.274667-13.482667 42.154667-37.098667 42.154667H144.32c-23.573333 0-41.088-19.136-37.077333-42.154667 0 0-4.096-256.512 404.864-256.512zM149.909333 896l0.064 3.861333-0.704 3.968c0.682667-3.882667-2.837333-7.829333-4.949333-7.829333H879.872c-2.154667 0-5.504 3.818667-5.205333 6.144l-0.426667-3.157333 0.064-3.157334c0-0.853333-0.128-3.349333-0.533333-7.125333a161.813333 161.813333 0 0 0-4.266667-23.082667 192.96 192.96 0 0 0-35.242667-71.104C780.330667 725.461333 678.634667 682.666667 512.106667 682.666667c-166.549333 0-268.224 42.794667-322.176 111.850666a192.96 192.96 0 0 0-35.242667 71.104c-2.176 8.426667-3.541333 16.192-4.266667 23.082667a81.045333 81.045333 0 0 0-0.512 7.296z"
              fill="#5C5C66"
              p-id="4414"
            ></path>
          </svg>
          <span>我的</span>
        </li>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  mounted () {

    // 可以直接使用ref绑定后，直接访问该元素
    // console.log(this.$refs)
    // console.log(this.$refs.nav.offsetWidth)
    // console.log(this.$refs.nav.offsetHeight)
  }
}
</script>

<style lang="scss" scoped>
.navigation {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 3.125rem;
  ul {
    display: flex;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 -0.5px 1px rgba(95, 95, 95, 0.411);
    li {
      width: 25%;
      line-height: 1.5625rem; //如果在一行里使用行高限制了几行行(flex-direction: column)，那就要行高/n行才能显示
      //这里49px/2=24.5px转化为rem
      display: flex;
      align-items: center;
      flex-direction: column;
      .icon {
        width: 1.5rem;
        height: 1.75rem;
      }
      span {
        font-size: 0.875rem;
        height: 1.375rem
      }
    }
  }
}
.fqm-active {
  color: rgb(255, 110, 91);
  // 使用的svg里的path元素表示图标，其中的fill表示
  path {
    fill: rgb(255, 110, 91);
  }
  background-color:rgb(241, 241, 241);;
}

path {
  fill: rgb(87, 87, 87);
}
</style>
